<template>
	<view>
	<cu-custom :isBack="true">
		<block slot="backText"></block>
		<block slot="content">{{corpCode}}-打包复核</block>
	</cu-custom>
	<view class="content">
		<view class="cu-bar bg-white search fixed" :style="[{top:CustomBar + 'px'}]">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input @confirm="sub" v-model="soDjno" type="text" placeholder="输入搜索的关键词" :focus="focus"></input>
			</view>
			<view class="action">
				<text  @click="toScan" class="cuIcon-scan" style="font-size: 56rpx;"></text>
				<text v-if="soDjno2" @click="toImage" class="cuIcon-camera" style="font-size: 56rpx;"></text>
			</view>
		</view>
		<view style="height: 55px;">
		</view>
		<view style="padding: 0 10px;display: flex;justify-content: space-between;align-items: center;">
			<view class="">
				待复核：
				<switch class='red' @change="SwitchB" :class="switchB?'checked':''" :checked="switchB?true:false" color="#e54d42"></switch>
			</view>
			<view style="font-size: 20px;">
				{{soDjno2}}
			</view>
			 
		</view>
		<scroll-view v-if="true" scroll-y class="data_body" :style="[{height:'calc(87vh - '+ CustomBar + 'px - 180px)'}]">
			
			<view style="display: flex;flex-direction: column;justify-content: space-between;height: 100%; ">
				<view class="friend_operate">
					<senior-table :custom="true" :fontSize="[36]"  :headers="dataTable.headers" :contents="invPosData"  :firstLineFixed="true"  :sortCol="dataTable.sortCol" >
						
					</senior-table>
				</view>
				<view v-if="!invPosData.length" style="text-align: center;margin: auto;flex: 1;">
					请扫描包裹标签
				</view>
				<view v-if="invPosData.length" style="padding: 20rpx;display: flex;justify-content: space-between;align-items: center;">
					<view>
						剩余数量：<text style="font-size: 44rpx;color: red;">{{syQty}}</text>
					</view>
					<view class="">
						共 <text style="font-size: 44rpx;color: orange;">{{invPosData.length}}</text>条
					</view>
					<view class="">
						<button class="cu-btn bg-gradual-green shadow-blur round shadow margin-left" @click="fhmx">复核明细</button>
					</view>
					
					<!-- <page-pagination v-if="invPosData.length" :total="page.total" :pageSize="page.pageSize" :currentPage="page.currentPage" :showAround="true" :btnText="true" :showPageInfo="true" @change="change"></page-pagination> -->
				
				</view>
				<!-- <view v-if="invPosData.length">
					<view class="cu-form-group ">
						<view class="title" >剩余数量：
						<text style="font-size: 44rpx;color: red;">{{syQty}}</text>
						</view>
					</view>
					<view class="cu-form-group ">
						<view class="title" >复核数量：{{fhQty}}</view>
					</view>
				</view> -->
				
			</view>
			
			<view class="split_line"></view>
		</scroll-view>
		<!-- <view  v-else class="container padding_stand-big normal_color">
			<li class="iconfont icon-cry cry"></li>暂无数据
		</view> -->
	</view>
	<!-- style="height: 15vh;overflow: scroll;" -->
	<view  v-if="invPosData.length" >
		<!-- <uni-table border stripe emptyText="暂无更多数据" type="selection1">
			<uni-tr>
				<uni-th align="center">SKU</uni-th>
				<uni-th align="center">序列号</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in list2 " :key="index">
				<uni-td align="center">{{item.basInv.cinvname || ''}}</uni-td>
				<uni-td align="center">{{item.barCode}}</uni-td>
			</uni-tr> 
		</uni-table> -->
		<view v-for="(item,index) in list2" :key="index">
			<view class="cu-form-group ">
				<view class="title">
					<view class="">
						SKU：{{item.basInv.cinvname || ''}}
					</view>
				</view>
			</view>
			<view class="cu-form-group ">
				<view class="title" >
					<view class="">
						序列号：{{item.barCode || ''}}
					</view>
				</view>
			</view>
		</view>
	</view>
	<button v-if="invPosData.length" type="primary" class="no-border confirm-btn " style="margin: 10px;"  @click="confirm1">确定复核</button>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import tuiListCell from '../../components/thorui/tui-list-cell/tui-list-cell.vue'
	import PagePagination from '../../components/page-pagination/page-pagination.vue'
	import dataTable from "../../static/json/dbfh.json"
	import DataProgress from "../../components/data-progress/data-progress.vue"
	import SeniorTable from "../../components/data-table/senior-table.vue"
	export default {
		name:'wechat',
		props: {
			scrollHeight:{ 
				type:String,
				default:"600px"
			}
		},
		components:{
			DataProgress,
			SeniorTable,
			tuiListCell,
			PagePagination,
		},
		data() {
			return {
				state:'0',
				snnumber:'',
				syQty:'',
				fhQty:'',
				list2:[{basInv:''}],
				focus:true,
				soDjno2:'',
				switchB:false,
				soDjno:'',
				CustomBar: this.CustomBar, //滚动定位用
			   filterText: '',
			   modalName:'',
			   flName:'请选择分类',
			   mscode:'',
			   data: [{mcode:'',mname:'',childs:[]}],
			   page:{
					total: 0,  //共多少条
					pageSize: 1000,//每页条数
					currentPage: 1 //第几页
				  },
				scrollTop: 0,
				delayload: false,
				Seltim: [],
				initStartDate: '',
				initEndDate: '',
				orgname:'',
				name:'',
				companyList:[],
				flList:[],
				rDate:'',
				lDate:'',
				companyName:'',
				pageSize:1000,
				pageNo:1,
				list:[],
				defaultProps: {
					children: 'childs',
					label: 'mname',
				},
				dataTable,
				soDjno:'',
				invPosData: [],
				cinvcodes:'',
				cinvnames:'',
				cposnames:'',
				
			}
		},
		onShow() {
			// if(this.soDjno2){
			// 	this.getPosData()
			// }
		},
		onLoad(data) {
			// this.soDjno=data.soDjno;
			// this.getPosData();
			let that = this
			
			uni.getSystemInfo({
			  success: function(res) {
			    var screenWidth=(res.windowWidth-20)/(uni.upx2px(100)/100);
			    that.dataTable.headers[0].width=screenWidth * (2/3);
			    that.dataTable.contents[0].width=that.dataTable.headers[0].width;
			    that.dataTable.headers[1].width=screenWidth * (1/3) * (3/7);
			    that.dataTable.contents[1].width=that.dataTable.headers[1].width;
			    that.dataTable.headers[2].width=screenWidth * (1/3) * (4/7);
			    that.dataTable.contents[2].width=that.dataTable.headers[2].width;
			  }
			});
			
			//设置栏目宽度
			// var screenWidth=(window.screen.width-20)/(uni.upx2px(100)/100);
			// this.dataTable.headers[0].width=screenWidth/2;
			// this.dataTable.contents[0].width=this.dataTable.headers[0].width;
			// this.dataTable.headers[1].width=screenWidth/4;
			// this.dataTable.contents[1].width=this.dataTable.headers[1].width;
			// this.dataTable.headers[2].width=screenWidth/4;
			// this.dataTable.contents[2].width=this.dataTable.headers[2].width;
		
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'auditlist', 'corpCode']),
		},
		methods:{
			confirm1(){
				
				this.focus = false
					this.state = '0'
					this.list2 = [{basInv:''}];
					this.invPosData = [];
					this.soDjno = ''
					this.soDjno2 = ''
				setTimeout(()=>{
					this.focus = true
				},500)
				
				
				// uni.showModal({
				//     content: '是否确定复核！',
				// 	// showCancel:false,
				// 	success: (confirmRes) => {
				// 		this.focus = false
				// 		if(confirmRes.confirm){
				// 			this.state = '0'
				// 			this.list2 = [{basInv:''}];
				// 			this.invPosData = [];
				// 			this.soDjno = ''
				// 			this.soDjno2 = ''
				// 		}
				// 		setTimeout(()=>{
				// 			this.focus = true
				// 		},500)
				// 	}
				// });
			},
			/** 扫发出声音*/
			makeSound(name){
				console.log("=====testClick=====");
				let src = '../../static/'+name+'.mp3';
				//实例化声音  
				const Audio = uni.createInnerAudioContext();
				Audio.autoplay = true;
				Audio.src = src; //音频地址  
				Audio.play(); //执行播放  
				Audio.onError((res) => {
				});
				Audio.onPause(function() {
					console.log('end');
					Audio.destroy();
				});
			},
			sub(){
				this.focus = false
				if(!this.soDjno){
					this.$api.msg('请扫描正确的拣货单号!');
					setTimeout(()=>{
						this.focus = true
					},500)
					return;
				}else{
					if(this.state=='0'){
						uni.request({
							url: this.serverURL_a + `/barcode/decode/checkBarCode`,
							data: {
								barCode: this.soDjno,
								__sid: this.userInfo.sessionid,
							},
							header: {
								'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
							},
							method: 'POST',
							success: function(data) {
								let res = data.data
								if(res.result == 'true'){
									this.soDjno = '';
									setTimeout(()=>{
										this.focus = true
									},500)
									// this.$api.msg('包裹异常');
									this.makeSound("bgbcz");
									// this.snnumber = this.soDjno
									// uni.request({
									// 	url:this.serverURL_a+'/so/App/checkOrderPickCN',
									// 	data:{
									// 		soCode : this.soDjno2,
									// 		snnumber : this.snnumber,
									// 		__sid:this.userInfo.sessionid
									// 	},
									// 	header: {
									// 		'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
									// 	},
									// 	method: 'POST',
									// 	success:function(data){
									// 		// this.soDjnoPos = this.soDjno;
									// 		this.soDjno = '';
									// 		var requrt = data.data;
									// 		if(requrt.result == 'true'){
									// 			setTimeout(()=>{
									// 				this.focus = true
									// 			},500)
									// 			this.makeSound("cg");
									// 			this.getPosData()
									// 			// this.list2.push(requrt.data)
									// 			this.list2 = [requrt.data]
									// 		}else{
									// 			// this.$api.msg(requrt.msg);
									// 			this.makeSound("sb");
									// 			uni.showModal({
									// 			    content: requrt.message,
									// 				showCancel:false,
									// 				success: (confirmRes) => {
									// 					setTimeout(()=>{
									// 						this.focus = true
									// 					},500)
									// 				}
									// 			});
									// 			return;
									// 		}
									// 	}.bind(this),
									// 	fail:function(){
									// 		this.$api.msg('服务已停止,请稍后再试');
									// 		return;
									// 	}.bind(this),
									// });
								}else{
									
									if(this.soDjno2 != this.soDjno){
										this.list2 = [{basInv:''}]
									}
									this.soDjno2 = this.soDjno
									this.getPosData()
								}
								
							}.bind(this),
							fail: function() {
								this.$api.msg('无法连接服务，请联系管理');
								this.inputVal = ''
								return;
							}.bind(this),
						})
					}else{
						this.snnumber = this.soDjno
						uni.request({
							url:this.serverURL_a+'/so/App/checkOrderPickCN',
							data:{
								soCode : this.soDjno2,
								snnumber : this.snnumber,
								__sid:this.userInfo.sessionid
							},
							header: {
								'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
							},
							method: 'POST',
							success:function(data){
								// this.soDjnoPos = this.soDjno;
								this.soDjno = '';
								var requrt = data.data;
								if(requrt.result == 'true'){
									setTimeout(()=>{
										this.focus = true
									},500)
									this.makeSound("cg");
									this.getPosData()
									// this.list2.push(requrt.data)
									this.list2 = [requrt.data]
								}else{
									// this.$api.msg(requrt.msg);
									this.makeSound("sb");
									uni.showModal({
									    content: requrt.message,
										showCancel:false,
										success: (confirmRes) => {
											setTimeout(()=>{
												this.focus = true
											},500)
										}
									});
									return;
								}
							}.bind(this),
							fail:function(){
								this.$api.msg('服务已停止,请稍后再试');
								return;
							}.bind(this),
						});
					}
					
					
					// this.soDjno2 = this.soDjno
					// this.getPosData()
					
				}
				
			},
			toScan() {
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						this.soDjno = res.result;
						this.soDjnoPos=res.result;
						this.sub();
					}.bind(this)
				});
			},
			toImage(){
				uni.navigateTo({
					url: '/pages/dbfh/upload?soCode=' + this.soDjno2,
				})
				// uni.chooseImage({
				//     count: 5, // 默认9, 设置图片的数量
				//     sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				//     sourceType: ['camera','album'], // 可以指定来源是相册还是相机，默认二者都有  camera拍照，album打开手机相册
				//     success: (res) => {
				// 		console.log(res,'res====');
				//           // 成功选择图片后的回调
				//           const tempFilePaths = res.tempFilePaths;
				//           // 使用uploadFile上传图片
				//           this.uploadPhoto(tempFilePaths[0]);
				//     },
				//     fail: (err) => {
				//           // 处理错误情况
				//           console.log('chooseImage fail', err);
				//     }
				// });
			},
			// 上传图片到服务器
			    uploadPhoto(photoPath) {
			      // 使用uniapp API上传文件
			      uni.uploadFile({
			        url: this.serverURL_a+'/so/app/fileuplaod/upload', // 服务器上传接口
			        filePath: photoPath, // 要上传文件资源的路径
			        name: 'file', // 必填，文件对应的 key
			        formData: {
			          'user': 'test' // 额外的上传参数
			        },
			        success: (uploadFileRes) => {
			          // 处理上传成功的结果
			          console.log('uploadFile success', uploadFileRes);
			        },
			        fail: (uploadFileErr) => {
			          // 处理上传失败的错误
			          console.log('uploadFile fail', uploadFileErr);
			        }
			      });
			    },
			SwitchB(e) {
			    this.switchB = e.detail.value
				uni.request({
					url:this.serverURL_a+'/so/App/findOrderListCN',
					data:{
						soCode : this.soDjno2,
						pageNo:this.pageNo,
						pageSize: this.pageSize,
						bend:this.switchB?'0':'',
						__sid:this.userInfo.sessionid
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
					},
					method: 'POST',
					success:function(data){
						var requrt = data.data;
						this.invPosData = requrt.list;
						// if(!this.invPosData.length){
						// 	this.makeSound("bgbcz");
						// 	this.soDjno2 = ''
						// }else{
						// 	this.soDjno2 = this.soDjno
						// 	this.state = '1'
						// }
						this.soDjno = ''
						let sum = 0
						this.fhQty = 0
						this.invPosData.map(item=>{
							sum += item.iqty
							this.fhQty += item.fhQty
						})
						this.syQty = sum - this.fhQty
						
						this.page.total = requrt.count;
						setTimeout(()=>{
							this.focus = true
						},500)
					}.bind(this),
					fail:function(){
						this.$api.msg('服务已停止,请稍后再试');
						return;
					}.bind(this),
				});
			},
			createSo(){
				uni.navigateTo({
					url: '/pages/dbfh/ksfh?soCode=' + this.soDjno2,
				})
			},
			fhmx(){
				uni.navigateTo({
					url: '/pages/dbfh/fhmx?soCode=' + this.soDjno2,
				})
			},
			getPosData(){
				uni.request({
					url:this.serverURL_a+'/so/App/findOrderListCN',
					data:{
						soCode : this.soDjno2,
						pageNo:this.pageNo,
						pageSize: this.pageSize,
						bend:this.switchB?'0':'',
						__sid:this.userInfo.sessionid
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
					},
					method: 'POST',
					success:function(data){
						var requrt = data.data;
						this.invPosData = requrt.list;
						if(!this.invPosData.length){
							// this.$api.msg('包裹异常');
							this.makeSound("bgbcz");
							this.soDjno2 = ''
						}else{
							// this.soDjno2 = this.soDjno
							this.state = '1'
						}
						this.soDjno = ''
						let sum = 0
						this.fhQty = 0
						this.invPosData.map(item=>{
							sum += item.iqty
							this.fhQty += item.fhQty
						})
						this.syQty = sum - this.fhQty
						
						this.page.total = requrt.count;
						setTimeout(()=>{
							this.focus = true
						},500)
					}.bind(this),
					fail:function(){
						this.$api.msg('服务已停止,请稍后再试');
						return;
					}.bind(this),
				});
				// if(this.pageNo==1){
				// 	this.list=[];
				// };
				// let soDjno=this.soDjno;
				// //let cinvname=this.cinvnames;
				// let cinvcode=this.cinvcodes;
				// let cposname=this.cposnames;
				// let pageSize=this.pageSize;
				// let pageNo=this.pageNo;
				// uni.request({
				// 	url:this.serverURL_a+'/wh/u8/u8InvpositionSum/findInvPosNum?__ajax=json',
				// 	data:{
				// 		soDjno : soDjno,
				// 		cinvcode : cinvcode,
				// 		cposname : cposname ,
				// 		pageSize:pageSize,
				// 		pageNo:pageNo,
				// 		__sid:this.userInfo.sessionid,
				// 	},
				// 	header: {
				// 		'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
				// 	},
				// 	method: 'POST',
				// 	success:function(data){
				// 		let ret = data.data;
				// 		//获取总条数，其余显示插件自动计算
				// 		this.page.total = ret.count;
				// 		if(data.statusCode!="200"){
				// 			uni.showModal({
				// 				content: ret.message,
				// 				showCancel:false,
				// 			});
				// 			return;
				// 		}
				// 		this.invPosData = ret.list;
				// 	}.bind(this),
				// 	fail:function(){
				// 		this.$api.msg('服务已停止,请稍后再试');
				// 		return;
				// 	}.bind(this),
				// });
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			change(currentPage, type){
			      this.page.currentPage = currentPage;
				  this.pageNo= this.page.currentPage;
				  this.getPosData();
			},
		}
	}
</script>

<style scoped lang="less">
	
	.cu-dialog{
		    height: 300px;
		    overflow: auto;
	}
	.content{
		padding-top: 10rpx;
		.progress,.firend_operate{
			padding: 0 10rpx;
		}
		.progress{
			margin-bottom: 20rpx;
		}
		.friend_operate{
			overflow: scroll;
			flex: 1;
			padding: 30rpx 20rpx;
			.title{
				text-align:left;
				margin-bottom: 30rpx;
				font-size: 40rpx;
			}
			.trend_title{
				text-align: right;
				font-size: 22rpx;
				color: #ff9900;
				margin-top: 50rpx;
			}
		}
	}
	
	.ly-search {
		margin: 0 30rpx;
		margin-top: 40rpx;
		padding-bottom: 15rpx;
		border-bottom: 1px solid #ededed;
	}
	.container {
		padding: 20rpx 0 50rpx 0;
	}
	
	.tui-line-cell {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	
	.tui-title {
		line-height: 32rpx;
		min-width: 120rpx;
		flex-shrink: 0;
	}
	
	.tui-input {
		font-size: 32rpx;
		color: #333;
		padding-left: 20rpx;
		flex: 1;
		overflow: visible;
	}
	
	.radio-group {
		margin-left: auto;
		transform: scale(0.8);
		transform-origin: 100% center;
		flex-shrink: 0;
	}
	
	.tui-radio {
		display: inline-block;
		padding-left: 28rpx;
		font-size: 36rpx;
		vertical-align: middle;
	}
	
	
	.tui-btn-box {
		padding: 40rpx 50rpx;
		box-sizing: border-box;
	}
	
	.tui-button-gray {
		margin-top: 30rpx;
	}
	
	.tui-tips {
		padding: 30rpx;
		color: #999;
		font-size: 24rpx;
	}
	
	.d-container {
		width: 400rpx;
		padding: 80rpx 30rpx;
	}
	
	.usingtext{
		margin-left: 30rpx;
		color: #999;
	}
	
	.tui-right {
		margin-left: auto;
		padding-right: 30rpx;
		color: #999;
	}
	
	.numtext{
		text-align: center;
	}
</style>

